<template>
     <!-- 表格主体 -->
      <el-table v-loading="loading" :data="transPayList" @selection-change="handleSelectionChange">
        <el-table-column label="#" type="index" align="center" /> 
        <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="主键ID" align="center" prop="id" /> -->
      <el-table-column label="承运商" align="center" prop="carrier" />
      <el-table-column label="始发城市" align="center" prop="startCity" />
      <el-table-column label="到货城市" align="center" prop="endCity" />
      <el-table-column label="单公斤运费" align="center" prop="kilogramMoney" />
      <el-table-column label="单立方运费" align="center" prop="cubeMoney" />
      <el-table-column label="最小运费" align="center" prop="minMoney" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="trans_pay_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="创建人" align="center" prop="createBy" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <div class="button-group">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['basic:transPay:edit']" class="u">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['basic:transPay:remove']">删除</el-button>
        </div>
        </template>
      </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

//接受父组件
let props = defineProps({
  transPayList:{
    type:Array,
    default:[]
  },
  loading:{
    type:Boolean,
    default:false
  },
  trans_pay_status:{
    type:Object,
    default:null
  }
})

const emits = defineEmits(['handleUpdate','handleDelete'])
//定义事件
//修改
let handleUpdate = (row: any)=>{
  emits('handleUpdate',row)
 }
 let handleDelete = (row: any)=>{
  emits('handleDelete',row)
 }
 /**
emits('handleUpdate', row): 调用了 emits 方法，触发名为 'handleUpdate' 的事件。
将 row 数据作为参数传递给父组件
emits('handleUpdate', row) 是子组件向父组件传递事件和数据的方式。
*/

</script>


<style scoped>
.u,
.d {
  width: 60px; /* 设置按钮的宽度 */
  height: 30px; /* 设置按钮的高度 */
  padding: 0; /* 移除默认内边距 */
  text-align: center; /* 文字居中 */
}
.u {
  color: rgb(13, 132, 212);
}
.button-group {
  display: flex;
  gap: 5px; /* 调整按钮之间的间距 */
}
</style>